<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🧚‍♀️ AI童话书 - 独立版</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
            padding: 20px;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            color: white;
        }

        .header h1 {
            font-size: 2.8em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            animation: glow 2s ease-in-out infinite alternate;
        }

        @keyframes glow {
            from { text-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 10px rgba(255,255,255,0.2); }
            to { text-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 20px rgba(255,255,255,0.4); }
        }

        .header p {
            font-size: 1.3em;
            opacity: 0.9;
        }

        .main-content {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
            margin-bottom: 20px;
        }

        .control-panel {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
            align-items: end;
        }

        .template-selector {
            display: flex;
            flex-direction: column;
        }

        .template-selector label {
            margin-bottom: 8px;
            font-weight: bold;
            color: #495057;
            font-size: 1.1em;
        }

        .template-selector select {
            padding: 15px;
            border: 2px solid #dee2e6;
            border-radius: 10px;
            font-size: 16px;
            background: white;
            cursor: pointer;
            transition: border-color 0.3s ease;
        }

        .template-selector select:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .btn {
            padding: 15px 25px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .btn-primary {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }

        .btn-secondary {
            background: #f8f9fa;
            color: #495057;
            border: 2px solid #dee2e6;
        }

        .btn-secondary:hover {
            background: #e9ecef;
            border-color: #adb5bd;
            transform: translateY(-2px);
        }

        .story-display {
            margin-top: 30px;
            padding: 30px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 15px;
            border-left: 6px solid #667eea;
            display: none;
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .story-title {
            font-size: 1.8em;
            font-weight: bold;
            color: #495057;
            margin-bottom: 20px;
            text-align: center;
            padding: 15px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .story-text {
            font-size: 1.2em;
            line-height: 2;
            color: #495057;
            margin-bottom: 30px;
            text-align: justify;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .choices {
            display: grid;
            gap: 15px;
        }

        .choice-btn {
            padding: 20px 25px;
            background: white;
            border: 3px solid #667eea;
            border-radius: 12px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
            text-align: left;
            position: relative;
            overflow: hidden;
        }

        .choice-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
            transition: left 0.5s ease;
        }

        .choice-btn:hover::before {
            left: 100%;
        }

        .choice-btn:hover {
            background: #667eea;
            color: white;
            transform: translateX(10px) scale(1.02);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
        }

        .loading {
            text-align: center;
            padding: 30px;
            color: #6c757d;
            font-size: 1.2em;
        }

        .loading-spinner {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 15px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .error {
            background: #f8d7da;
            color: #721c24;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            border: 1px solid #f5c6cb;
            display: none;
        }

        .footer {
            text-align: center;
            color: white;
            opacity: 0.9;
            margin-top: 30px;
            font-size: 1.1em;
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .stat-number {
            font-size: 2em;
            font-weight: bold;
            color: #667eea;
        }

        .stat-label {
            color: #6c757d;
            margin-top: 5px;
        }

        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            
            .header h1 {
                font-size: 2.2em;
            }
            
            .main-content {
                padding: 25px;
            }
            
            .control-panel {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .stats {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🧚‍♀️ AI童话书</h1>
            <p>与AI一起创造属于你的奇幻故事世界</p>
        </div>

        <div class="main-content">
            <div class="stats">
                <div class="stat-card">
                    <div class="stat-number" id="storyCount">0</div>
                    <div class="stat-label">生成故事</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" id="choiceCount">0</div>
                    <div class="stat-label">互动选择</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" id="sessionTime">0</div>
                    <div class="stat-label">游戏时长(分)</div>
                </div>
            </div>

            <div class="control-panel">
                <div class="template-selector">
                    <label for="storyTemplate">🎭 选择故事主题：</label>
                    <select id="storyTemplate">
                        <option value="magic_forest">🌲 魔法森林的冒险</option>
                        <option value="underwater">🌊 海底世界探险</option>
                        <option value="space">🚀 太空探险记</option>
                        <option value="fairy_kingdom">👑 仙女王国传说</option>
                        <option value="dragon_valley">🐉 巨龙山谷秘境</option>
                    </select>
                </div>
                <button class="btn btn-primary" onclick="generateStory()">
                    📖 生成新故事
                </button>
                <button class="btn btn-secondary" onclick="resetStory()">
                    🔄 重新开始
                </button>
            </div>

            <div id="storyDisplay" class="story-display">
                <div id="storyTitle" class="story-title"></div>
                <div id="storyText" class="story-text"></div>
                <div id="choices" class="choices"></div>
            </div>

            <div id="loading" class="loading" style="display: none;">
                <div class="loading-spinner"></div>
                <div>正在生成精彩故事...</div>
            </div>

            <div id="error" class="error"></div>
        </div>

        <div class="footer">
            <p>🎭 AI童话书 - 让想象力自由飞翔 ✨</p>
            <p>独立版本 - 无需服务器，直接运行</p>
        </div>
    </div>

    <script>
        // 故事模板数据
        const STORY_TEMPLATES = {
            magic_forest: {
                title: "🌲 魔法森林的冒险",
                beginning: "在一个神秘的魔法森林里，住着一只聪明的小{animal}。有一天，{animal}发现了一个闪闪发光的{object}，这个{object}散发着奇异的光芒，似乎蕴含着强大的魔法力量...",
                choices: [
                    {id: "pickup", text: "🤲 小心翼翼地拿起这个神奇的物品"},
                    {id: "observe", text: "👀 仔细观察周围的环境和线索"},
                    {id: "friends", text: "🐾 寻找其他森林动物朋友帮忙"}
                ]
            },
            underwater: {
                title: "🌊 海底世界探险",
                beginning: "在深蓝色的海底深处，小{animal}游过了五彩斑斓的珊瑚礁。突然，{animal}看到了一座神秘的{object}，这座{object}闪烁着珍珠般的光泽，仿佛隐藏着古老的秘密...",
                choices: [
                    {id: "explore", text: "🏊‍♀️ 勇敢地游向神秘的建筑"},
                    {id: "discuss", text: "🐠 和海洋朋友们一起商量对策"},
                    {id: "treasure", text: "💎 仔细寻找周围的宝藏线索"}
                ]
            },
            space: {
                title: "🚀 太空探险记",
                beginning: "在遥远的银河系中，宇航员小{animal}驾驶着先进的飞船来到了一个神奇的星球。这里有着{object}般的美丽景色，整个星球都散发着梦幻般的光芒...",
                choices: [
                    {id: "land", text: "🛸 小心降落到星球表面探索"},
                    {id: "scan", text: "🔍 使用设备扫描星球环境"},
                    {id: "signal", text: "📡 向星球居民发送友好信号"}
                ]
            },
            fairy_kingdom: {
                title: "👑 仙女王国传说",
                beginning: "在云端之上的仙女王国里，小{animal}意外闯入了这个神奇的世界。王国中央有一个巨大的{object}，据说它能实现任何善良的愿望...",
                choices: [
                    {id: "approach", text: "✨ 小心接近神奇的许愿物品"},
                    {id: "guards", text: "👸 寻找仙女守卫询问情况"},
                    {id: "explore_kingdom", text: "🏰 先探索整个仙女王国"}
                ]
            },
            dragon_valley: {
                title: "🐉 巨龙山谷秘境",
                beginning: "在雄伟的巨龙山谷中，小{animal}发现了一个古老的{object}。传说这个{object}是古代巨龙留下的宝物，拥有不可思议的力量...",
                choices: [
                    {id: "dragon_call", text: "🐲 尝试呼唤古老的巨龙"},
                    {id: "ancient_study", text: "📜 研究古代文字和符号"},
                    {id: "power_test", text: "⚡ 小心测试物品的神秘力量"}
                ]
            }
        };

        // 故事续集
        const STORY_CONTINUATIONS = {
            pickup: "当{animal}触碰到{object}时，突然间整个森林都亮了起来！原来这是一个魔法{object}，它能够实现{animal}的愿望。森林里的其他动物们都围了过来，大家一起分享这个神奇的发现。{object}告诉{animal}，只要心怀善意，魔法就会永远伴随着大家...",
            
            observe: "{animal}仔细观察后发现，这个{object}周围有很多小脚印和神秘的符号，看起来其他小动物也来过这里。突然，{animal}听到了轻柔的音乐声，原来{object}在召唤着森林中所有善良的生灵。随着音乐响起，森林变得更加美丽，花朵绽放，小溪清澈...",
            
            friends: "{animal}呼唤朋友们，很快小兔子、小松鼠、小鸟都跑了过来。大家一起看着这个神奇的{object}，决定共同探索它的秘密。团结的力量让{object}散发出温暖的光芒，森林里响起了欢快的歌声。从此，这里成为了所有动物朋友们的快乐家园...",
            
            explore: "{animal}勇敢地游向{object}，发现这是一座古老的海底宫殿。宫殿里传来美妙的音乐声，原来是海洋精灵在欢迎{animal}的到来。精灵告诉{animal}，这座宫殿是海洋智慧的源泉，只有勇敢善良的心灵才能找到这里...",
            
            discuss: "海豚朋友告诉{animal}，这座{object}里住着善良的海洋精灵，她会帮助迷路的小动物找到回家的路。{animal}和朋友们一起进入{object}，发现里面有无数美丽的珍珠，每一颗都记录着海洋的美好故事...",
            
            treasure: "{animal}在{object}附近发现了一张古老的藏宝图，上面画着通往神秘宝藏的路线。按照地图的指引，{animal}开始了寻宝之旅，最终发现宝藏竟然是海洋生物们的友谊和快乐...",
            
            land: "{animal}小心翼翼地降落在星球表面，发现这里的{object}会发出七彩的光芒。当{animal}走近时，{object}开始变化形状，仿佛在与{animal}交流。原来这是星球的欢迎仪式，{object}是友谊的象征...",
            
            scan: "扫描结果显示，这个星球上的{object}含有未知但友善的能量。{animal}决定收集一些样本，突然发现{object}竟然是活的，正在友好地向{animal}招手。这是一个充满生命力的星球，所有生物都生活在和谐之中...",
            
            signal: "{animal}发送的友好信号得到了回应！星球上的{object}开始闪烁，似乎在回应{animal}的问候。不久，一群友善的外星生物出现了，他们用美丽的光芒欢迎来自地球的朋友...",
            
            approach: "当{animal}接近{object}时，整个仙女王国都响起了美妙的音乐。仙女女王出现了，她告诉{animal}，这个{object}是善良之心的体现，只有纯真的愿望才能激活它的力量...",
            
            guards: "仙女守卫们热情地接待了{animal}，她们解释说{object}是王国的守护神器，能够保护所有善良的生灵。{animal}被邀请参加王国的庆典，成为了荣誉仙女朋友...",
            
            explore_kingdom: "{animal}在探索王国时发现了许多奇迹：会唱歌的花朵、会跳舞的云彩、会发光的彩虹。最终，{animal}明白了{object}的真正意义——它代表着所有美好事物的集合...",
            
            dragon_call: "当{animal}呼唤巨龙时，一条古老而智慧的巨龙缓缓出现。巨龙告诉{animal}，{object}是友谊和勇气的象征，只有真正勇敢的心灵才配拥有它。{animal}通过了巨龙的考验，获得了永恒的友谊...",
            
            ancient_study: "{animal}通过研究古代文字，发现{object}记录着巨龙一族的智慧和历史。这些知识教会了{animal}如何与自然和谐相处，如何用善良的心对待所有生灵...",
            
            power_test: "当{animal}小心测试{object}的力量时，发现它能够治愈受伤的动物，让枯萎的植物重新生长。{animal}决定用这个力量帮助山谷中的所有生灵，成为了大家的守护者..."
        };

        // 角色和物品列表
        const ANIMALS = ["小兔", "小鹿", "小熊", "小狐狸", "小松鼠", "小猫", "小狗", "小鸟", "小龙", "小独角兽"];
        const OBJECTS = ["水晶", "宝石", "魔法书", "古老的钥匙", "神秘的盒子", "发光的花朵", "魔法棒", "星星", "许愿池", "彩虹桥"];

        // 游戏统计
        let gameStats = {
            storyCount: 0,
            choiceCount: 0,
            startTime: Date.now()
        };

        let currentStory = null;

        function updateStats() {
            document.getElementById('storyCount').textContent = gameStats.storyCount;
            document.getElementById('choiceCount').textContent = gameStats.choiceCount;
            
            const sessionMinutes = Math.floor((Date.now() - gameStats.startTime) / 60000);
            document.getElementById('sessionTime').textContent = sessionMinutes;
        }

        function generateStory() {
            const template = document.getElementById('storyTemplate').value;
            const loading = document.getElementById('loading');
            const storyDisplay = document.getElementById('storyDisplay');
            const errorDiv = document.getElementById('error');

            // 显示加载状态
            loading.style.display = 'block';
            storyDisplay.style.display = 'none';
            errorDiv.style.display = 'none';

            // 模拟AI生成延迟
            setTimeout(() => {
                try {
                    const storyTemplate = STORY_TEMPLATES[template] || STORY_TEMPLATES.magic_forest;
                    const animal = ANIMALS[Math.floor(Math.random() * ANIMALS.length)];
                    const object = OBJECTS[Math.floor(Math.random() * OBJECTS.length)];
                    
                    const storyText = storyTemplate.beginning.replace(/{animal}/g, animal).replace(/{object}/g, object);
                    
                    currentStory = {
                        template: template,
                        animal: animal,
                        object: object,
                        text: storyText,
                        choices: storyTemplate.choices
                    };
                    
                    gameStats.storyCount++;
                    updateStats();
                    
                    displayStory({
                        title: storyTemplate.title,
                        text: storyText,
                        choices: storyTemplate.choices
                    });
                } catch (error) {
                    showError('生成故事时出现错误: ' + error.message);
                } finally {
                    loading.style.display = 'none';
                }
            }, 1500);
        }

        function displayStory(story) {
            const storyDisplay = document.getElementById('storyDisplay');
            const storyTitle = document.getElementById('storyTitle');
            const storyText = document.getElementById('storyText');
            const choicesDiv = document.getElementById('choices');

            storyTitle.textContent = story.title;
            storyText.textContent = story.text;

            // 清空并添加选择按钮
            choicesDiv.innerHTML = '';
            if (story.choices && story.choices.length > 0) {
                story.choices.forEach((choice, index) => {
                    const button = document.createElement('button');
                    button.className = 'choice-btn';
                    button.textContent = `${index + 1}. ${choice.text}`;
                    button.onclick = () => continueStory(choice.id);
                    choicesDiv.appendChild(button);
                });
            }

            storyDisplay.style.display = 'block';
        }

        function continueStory(choiceId) {
            const loading = document.getElementById('loading');
            const errorDiv = document.getElementById('error');

            loading.style.display = 'block';
            errorDiv.style.display = 'none';

            // 模拟AI处理延迟
            setTimeout(() => {
                try {
                    if (!currentStory) {
                        throw new Error('没有当前故事');
                    }
                    
                    if (!(choiceId in STORY_CONTINUATIONS)) {
                        throw new Error('无效的选择');
                    }
                    
                    const continuation = STORY_CONTINUATIONS[choiceId]
                        .replace(/{animal}/g, currentStory.animal)
                        .replace(/{object}/g, currentStory.object);
                    
                    // 更新故事文本
                    const storyText = document.getElementById('storyText');
                    storyText.textContent += '\n\n' + continuation;
                    
                    // 隐藏选择按钮，显示结束信息
                    const choicesDiv = document.getElementById('choices');
                    choicesDiv.innerHTML = `
                        <div style="text-align: center; padding: 30px; background: linear-gradient(45deg, #667eea, #764ba2); color: white; border-radius: 15px; margin-top: 20px;">
                            <h3 style="margin-bottom: 15px;">🎉 故事完结 🎉</h3>
                            <p style="font-size: 1.1em; margin-bottom: 20px;">感谢您的参与，希望您喜欢这个故事！</p>
                            <button class="btn btn-secondary" onclick="generateStory()" style="background: white; color: #667eea; border: none;">
                                📖 生成新故事
                            </button>
                        </div>
                    `;
                    
                    gameStats.choiceCount++;
                    updateStats();
                    
                } catch (error) {
                    showError('继续故事时出现错误: ' + error.message);
                } finally {
                    loading.style.display = 'none';
                }
            }, 1200);
        }

        function resetStory() {
            const storyDisplay = document.getElementById('storyDisplay');
            const errorDiv = document.getElementById('error');
            
            storyDisplay.style.display = 'none';
            errorDiv.style.display = 'none';
            currentStory = null;
            
            // 重置统计
            gameStats = {
                storyCount: 0,
                choiceCount: 0,
                startTime: Date.now()
            };
            updateStats();
        }

        function showError(message) {
            const errorDiv = document.getElementById('error');
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🧚‍♀️ AI童话书独立版已加载完成');
            updateStats();
            
            // 定时更新游戏时长
            setInterval(updateStats, 60000);
        });

        // 添加键盘快捷键
        document.addEventListener('keydown', function(event) {
            if (event.ctrlKey && event.key === 'Enter') {
                generateStory();
            } else if (event.key === 'Escape') {
                resetStory();
            }
        });
    </script>
</body>
</html>